<!DOCTYPE html>
<html>
<head>
    <title>GAN Image Generator</title>
</head>
<body>
<h1>GAN Image Generator</h1>
<button id="generate-btn">Generate Images</button>
<div id="image-container"></div>

<script>
    document.getElementById('generate-btn').addEventListener('click', function () {
        fetch('/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({}),
        })
            .then(response => response.json())
            .then(data => {
                const imageContainer = document.getElementById('image-container');
                imageContainer.innerHTML = ''; // 清空之前的图像
                data.images.forEach(imgStr => {
                    const img = document.createElement('img');
                    img.src = 'data:image/png;base64,' + imgStr;
                    imageContainer.appendChild(img);
                });
            })
            .catch(error => console.error('Error:', error));
    });
</script>
</body>
</html>